<script setup>
import {reactive} from 'vue';
import {MessagePlugin} from 'tdesign-vue-next';
import {DesktopIcon, LockOnIcon} from 'tdesign-icons-vue-next';

const formData = reactive({
  account: '',
  password: '',
});

const registerFormData = reactive({
  account: '',
  password: '',
});

const onReset = () => {
  MessagePlugin.success('重置成功');
};

const onSubmit = ({validateResult, firstError}) => {
  if (validateResult === true) {
    MessagePlugin.success('提交成功');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};
</script>

<template>
  <div class="container">
    <h1 align="center">还没有名字系统</h1>
    <t-tabs :default-value="1">
      <t-tab-panel :value="1" label="登录">
        <div style="width: 350px">
          <t-form ref="form" :data="formData" :colon="true" :label-width="0" @reset="onReset" @submit="onSubmit">
            <t-form-item name="account">
              <t-input v-model="formData.account" clearable placeholder="请输入账户名">
                <template #prefix-icon>
                  <desktop-icon/>
                </template>
              </t-input>
            </t-form-item>

            <t-form-item name="password">
              <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
                <template #prefix-icon>
                  <lock-on-icon/>
                </template>
              </t-input>
            </t-form-item>

            <t-form-item>
              <t-button theme="primary" type="submit" block>登录</t-button>
            </t-form-item>
          </t-form>

        </div>
      </t-tab-panel>
      <t-tab-panel :value="2" label="注册">
        <div style="width: 350px">
          <t-form ref="form" :data="registerFormData" :colon="true" :label-width="0" @reset="onReset"
                  @submit="onSubmit">
            <t-form-item name="account">
              <t-input v-model="registerFormData.account" clearable placeholder="请输入账户名">
                <template #prefix-icon>
                  <desktop-icon/>
                </template>
              </t-input>
            </t-form-item>

            <t-form-item name="password">
              <t-input v-model="registerFormData.password" type="password" clearable placeholder="请输入密码">
                <template #prefix-icon>
                  <lock-on-icon/>
                </template>
              </t-input>
            </t-form-item>

            <t-form-item>
              <t-button theme="primary" type="submit" block>注册</t-button>
            </t-form-item>
          </t-form>
        </div>
      </t-tab-panel>
    </t-tabs>
  </div>
</template>


<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
